<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/self.css">
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>
        .contents{
            margin-top: 100px;
        }
    </style>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand self-padding-first-border"><img src="./img/TimberBlog.svg" width="150px" height="30px"></img></a>
    <button class="navbar-toggler" id="indexBtn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <!--            主页-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="index.html">
                    <i class="fa fa-home"></i>主页
                    <!--                    <span class="sr-only">(current)</span>-->
                </a>
            </li>
            <!--            分类-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="type.html">
                    <i class="fa fa-folder-open"></i>分类
                </a>
            </li>
            <!--标签-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="http://localhost:8088/demo/label.html">
                    <i class="fa fa-bookmark"></i>标签
                </a>
            </li>

            <!--            时间轴-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="timetable.html">
                    <i class="fa fa-calendar"></i>时间轴
                </a>
            </li>
        </ul>
        <!--        搜索按钮-->
        <form class="form-inline my-2 my-lg-0  self-padding-search-border">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="selfInf.html">
                    <i class="fa fa-user"></i>个人中心
                </a>
            </li>
            <!--编写文章-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="editor.html">
                    <i class="fa fa-keyboard-o"></i>文章编辑
                </a>
            </li>
        </ul>
    </div>
</nav>
<div id="main">
    <div id="top" class="contents">
        <form id="form">
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">题目：</label>
                <div class="col-8">
                    <input type="text" name="title" class="form-control">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">内容：</label>
                <div class="col-8">
                    <input type="text" name="content" class="form-control">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center"></label>
                <div class="col-8">
                    <button type="button" id="BtnSearch" class="btn btn-lg btn-success">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <div id="center">
        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>题目</td>
                <td>内容</td>
                <td>日期</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr>
                <td colspan="5" class="text-center">没有数据</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">编辑</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editform">

                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">题目：</label>
                        <div class="col-8">
                            <input type="text" name="title" id="editTitle" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">内容：</label>
                        <div class="col-8">
                            <input type="text" name="content" id="editContent" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">提交日期：</label>
                        <div class="col-8">
                            <input type="date" id="editDate" name="date" id="editDate" placeholder="请选择日期" class="form-control">
                        </div>
                    </div>
                    <!-- 存放要修改数据的主键值，作为条件使用 -->
                    <input type="hidden" name="id" id="editId">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doEdit()">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确认删除【<span id="delUserName"></span>】文本数据？
                <form id="delForm">
                    <input type="hidden" name="ids" id="delUserId">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doDelete()">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="jquery/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script>
    jQuery(function () {
        jQuery("#BtnSearch").click(function () {
            init();
        });
    })

</script>
<script>
    function init()
    {
        let form=jQuery("#form").serialize();
        jQuery.post("user/search_1",form,function (rst) {
            //js中非空即真
            //后台返回String或Map集合
            // if(!rst)
            // {
            //     //rst为空，提示
            // }
            //如果返回list，jquery自动转为数组

            // if(rst.length==0)
            // {
            //
            // }
            let trs='';
            for(let i=0;i<rst.length;i++)
            {
                let u=rst[i];
                trs+=`
                        <tr>
                            <td>
                                <input type="checkbox" name="ids" value="${u.id}">
                            </td>
                            <td>${u.title}</td>
                            <td>${u.content}</td>
                            <td>${u.date}</td>
                            <td>
                                 <a href="#" onclick='showDeleteDialog(${JSON.stringify(u)})'>删除</a>
                                <a href="#" onclick='showEditDialog(${JSON.stringify(u)})'>编辑</a>
                            </td>
                        </tr>
                    `;
            }
            if(trs.length==0)
            {
                trs=`
                         <tr>
                            <td colspan="5" class="text-center">没有数据</td>
                        </tr>
                    `;
            }
            //把数据添加到tbody中
            jQuery("#tbody").html(trs);

        })
    }
    function showEditDialog(user)
    {
        jQuery("#editId").val(user.id);
        jQuery("#editTitle").val(user.title);
        jQuery("#editContent").val(user.content);
        jQuery("#editDate").val(user.date);
        jQuery("#editModal").modal('show');
    }
    function doEdit() {
        let form=jQuery("#editform").serialize();
        jQuery.post("user/Edit",form,function (rst) {
            if(rst>0)
            {
                jQuery("#editModal").modal('hide');
                alert("修改成功！");
                init();
            }else{
                alert("修改失败！");
            }
        })
    }
</script>
<script>
    function showDeleteDialog(user){
        console.log(user);
        jQuery("#delUserName").html(user.title);
        jQuery("#delUserId").val(user.id);
        jQuery("#delModal").modal('show');
    }
    function doDelete() {
        let form=jQuery("#delForm").serialize();
        jQuery.post("user/delete",form,function(rst){

            if(rst>0){
                alert("删除成功");
                init();
            }
            else{
                alert("删除失败");
            }
        })
        jQuery("#delModal").modal('hide');
    }
</script>

<script>
    $( '.ui.dropdown ' ).dropdown({on:'hover'}) ;
</script>

</html>